window.onload=function(){
	//搜索区块的背景色随着页面的上下滚动会发生变化
	searchColor();
	// 轮播图功能函数
	bannerPlay();
	// 倒计时功能函数
	downTime();
};
// 搜索区块的颜色变化函数
function searchColor(){
	// 获取相关元素
	// 获取搜索盒子
	// querySelector()方法：根据选择器获取元素
	// 返回满足条件的第一个元素
	var searchBox=document.querySelector(".jd_header_box");
	console.log(searchBox);
	// 获取轮播图
	var bannerBox=document.querySelector(".jd_banner");
	// 获取轮播图的高度
	var h=bannerBox.offsetHeight;
	console.log(h);
	// 页面滚动的时候改变透明度
	window.onscroll=function(){
		//获取页面垂直滚动的距离
		var top=document.body.scrollTop||document.documentElement.scrollTop;
		console.log(top);
		// 保存透明度的变量
		var opacity=0;
		if(top<h){
			opacity=top/h*0.85;
		}else{
			opacity=0.85;
		}
		// 改变透明度
		searchBox.style.background="rgba(201,21,35,"+opacity+")";
		// searchBox.style.background="rgba(201,21,35,"+0.85+")";
	};
}
// 定义轮播图功能函数
function bannerPlay(){
	// 描述功能
	// 1、自动播放
	// 2、播放的时候和圆点对应起来
	// 3、触摸滑动播放（移动端）
	// 4、滑动的距离不够会自动吸附回去,距离够才切换图片
	// 获取轮播图大盒子区域
	var bannerBox=document.querySelector(".jd_banner");
	// 计算轮播图滚动的区域宽度
	var w=bannerBox.offsetWidth;
	console.log(w);
	// 获取图片所在的盒子，就是第一个ul
	var imageBox=document.querySelector("ul:first-child");
	console.log(imageBox);
	// 获取圆点所在的盒子，就是第二个ul
	var pointBox=document.querySelector("ul:last-child");
	// 进而获取里面的所有圆点，就是所有的li
	// 方法querySelectorAll(选择器)，数组形式返回满足条件的所有元素，
	var points=pointBox.querySelectorAll("li");
	console.log(points);
	// 自动播放，就是不断改变第一个ul的位置，用到定时器
	var timer=null;
	// 播放到哪张图片（图片的编号）
	var index=1;
	// 改变图片盒子ul位置的时候，有时需要过渡效果，有时不需要过渡效果
	// 到达最后一张，瞬间显示另外一张相同的图片，不需要过渡效果
	// 定义添加过渡效果函数
	function addTransition(){
		imageBox.style.transition="transform 0.3s";
	}
	// 定义删除过渡效果函数
	function removeTransition(){
		imageBox.style.transition="none";
		console.log("取消过渡效果");
	}
	//除了自动播放要改变图片盒子的位置，滑动时候也要改变它的位置
	//专门定义一个改变盒子位置的函数，方便各种情况调用实现位置的改变
	function setTranslateX(x){
		// 参数x就是新位置
		imageBox.style.transform="translateX("+x+"px)";
	}
	timer=setInterval(function(){
		// 自动播放下一张就是让index加1
		index=index+1;
		//  控制index的范围[0,9]
		// if(index>=9){
		// 	index=1;
		// }
		// 我们要判断是否到达最后一张或第一张图片
		// 什么时候判断？每次改变完位置判断
		// 也就是过渡结束后进行判断
		console.log("index:"+index);
		// 调用添加过渡效果函数
		addTransition();
		// imageBox.style.transition="transform 0.3s";
		// 改变ul的位置
		// imageBox.style.transform="translateX("+(-index*w)+"px)";
		// 调用函数就可以了
		setTranslateX(-index*w);
	},2000);
	// 添加过渡结束事件
	imageBox.addEventListener("transitionend",function(){
		//图片切换完毕
		console.log("图片切换完毕：index="+index);
		if(index>=9){
			// 向左运动
			// 到达最后一张，瞬间显示另外一张相同的图片
			index=1;
			// 不需要过渡效果
			// 临时删除过渡效果
			removeTransition();
			//定位
			setTranslateX(-index*w);
		}
		else if(index<=0){
			// 向右运动
			// 到达第一张，瞬间显示另外一张相同的图片
			index=8;
			// 删除过渡
			removeTransition();
			// 定位
			setTranslateX(-index*w);
		}
		// 图片切换完毕，和圆点对应起来
		// 调用函数
		setPoint();
	});
	// 专门写一个圆点和图片对应的功能函数
	function setPoint(){
		// 所有都没有对应
		for(var i=0;i<points.length;i++){
			points[i].className="";
		}
		// 对应
		points[index-1].className="now";
	}
	// 实现滑动播放
	// 1、保存手指落在屏幕上的位置(开始滑动时的位置)
	var startX=0;
	// 2、保存手指在屏幕上滑动时的位置(不断改变之中)
	var moveX=0;
	// 3、计算两个位置的差
	var distanceX=0;
	// 记录滑动状态，true表示滑动，false表示未滑动
	var isMove=false;
	// 手指落在屏幕上，此时触摸开始事件
	// 1、记录位置，2、停止自动播放
	imageBox.addEventListener("touchstart",function(e){
		// 关闭定时器
		clearInterval(timer);
		// 记下此时位置
		startX=e.touches[0].clientX;
		// 输出位置看看
		console.log("startX:"+startX);
	});
	// 手指开始滑动，触摸滑动事件
	imageBox.addEventListener("touchmove",function(e){
		// 在滑动
		isMove=true;
		// console.log(isMove);
		// 记录最新位置
		moveX=e.touches[0].clientX;
		console.log("moveX:"+moveX);
		// 计算两个位置的差=手指滑到的位置-手指开始的位置
		distanceX=moveX-startX;
		console.log("distanceX:"+distanceX);
		// 滑动过程，改变图片的位置
		// 图片此时的位置=滑动前的位置+滑动的距离
		var currentX=-index*w+distanceX;
		// 自己滑动，不需要过渡效果
		removeTransition();
		// 定位
		setTranslateX(currentX);
	});
	// 什么时候切换图片：手指离开屏幕，
	// 如果滑动的距离太小，不切换图片，还是显示当前图片，index值不变
	// 滑动的距离足够大(自己设置的一个值：距离超过屏幕宽度的多少),切换图片
	// 最后恢复图片的自动播放
	// 手指离开屏幕就是触摸结束事件
	imageBox.addEventListener("touchend",function(e){
		// 判断是否滑动过和距离
		if(isMove && Math.abs(distanceX)>w/3){
			// 切换图片
			// 左滑动还是右滑动
			if(distanceX>0){
				// 往右滑动
				index=index-1;
			}else{
				// 往左滑动
				index=index+1;
			}
			// 要改变图片的位置，添加过渡效果
			addTransition();
			// 定位
			setTranslateX(-index*w);
		}
		else{
			// 不切换(回到老位置，也就是不改变index的值)
			// 添加过渡效果
			addTransition();
			// 定位
			setTranslateX(-index*w);			
		}
		// 此时，手指已经离开屏幕，要恢复图片的自动播放
		// 手指离开屏幕，意味着不在滑动状态，重置相关变量
		startX=0;
		moveX=0;
		distanceX=0;
		isMove=false;
		//开启定时器
		//先关闭定时器
		clearInterval(timer);
		timer=setInterval(function(){
			index=index+1;
			// 添加过渡效果
			addTransition();
			// 定位
			setTranslateX(-index*w);
		},2000);
	});
}
// 定义倒计时功能函数
function downTime(){
	// 设定倒计时活动的结束时间
	var end=new Date("2020-1-1 12:00:00");
	// 设定倒计时活动的开始时间，就是访问这个页面的时间
	var start=new Date();
	// console.log(start);
	// 活动剩余时间:结束时间-开始时间,得到的是总毫秒数
	var time=end-start;
	// 换算为秒
	time=time/1000;
	// console.log(time);
	// 把时间显示在页面上
	// 用到定时器,保存定时器的变量
	var timer=null;
	// 获取页面的相关元素
	var skTime=document.querySelector(".sk_time");
	console.log(skTime);
	// 获取该元素里面的所有span
	var spans=skTime.querySelectorAll("span");
	// 开启定时器实现倒计时效果
	timer=setInterval(function(){
		// 时间按1秒递减
		time=time-1;
		// 判断倒计时是否结束
		if(time<=0){
			// 关闭定时器
			clearInterval(timer);
			// 提示活动结束
			skTime.innerHTML="<span style='width:100px;background:#fff;color:red;'>活动已结束</span>";
			// 退出函数
			return false;
		}
		// console.log("剩余时间："+time);
		// 把时间变成天数，时分秒
		// 天数
		var day=Math.floor(time/60/60/24);
		// 小时数
		var hour=Math.floor(time/60/60%24);
		// 分钟数
		var minute=Math.floor(time/60%60);
		// 秒数
		var second=Math.floor(time%60);
		// console.log(day,hour,minute,second);
		// 把时间显示在页面的相应位置
		// 天
		spans[0].innerHTML=day;
		// 时，显示成两位数的形式
		spans[2].innerHTML=Math.floor(hour/10);//十位上的数字
		spans[3].innerHTML=hour%10;//个位上的数字
		// 分，显示成两位数的形式
		spans[5].innerHTML=Math.floor(minute/10);
		spans[6].innerHTML=minute%10;
		// 秒，显示成两位数的形式
		spans[8].innerHTML=Math.floor(second/10);
		spans[9].innerHTML=second%10;
	},1000);
} 